<template>
  <div class="page-box">
    <!-- 筛选区域 -->
    <div v-show="flag" class="search-box">
      <!-- :inline="true" 表单在一行显示 -->
      <el-form size="small" :inline="true" class="demo-form-inline">
        <el-form-item label="广告图表述">
          <el-input v-model="params.advimgdesc" placeholder="请输入广告图表述" />
        </el-form-item>
        <el-form-item label="广告图位置" prop="advposname">
          <el-select v-model="params.advimgpos" placeholder="请选择广告位">
            <el-option v-for="item in advposlist" :key="item.id" :label="item.advposname" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="serach">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 工具条区域 -->
    <div class="tabbar-box">
      <el-row type="flex" justify="space-between">
        <div>
          <el-button plain type="primary" icon="el-icon-plus" size="mini" @click="addadvimg('add')">新增</el-button>
          <el-button v-show="multipleSelection.length" plain type="danger" icon="el-icon-download" size="mini" @click="delall">删除</el-button>
          <el-button plain type="warning" icon="el-icon-download" size="mini" @click="exportExcel">导出</el-button>
        </div>
        <div>
          <el-tooltip class="item" effect="dark" content="关闭搜索区" placement="top">
            <el-button :icon="up" size="small" circle @click="hide" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button icon="el-icon-refresh" size="small" circle @click="reload" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="筛选" placement="top-start">
            <el-popover placement="bottom" width="100" trigger="click">
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(item,index) in renderList" :key="index" class="fa fa fa-dedent" :label="item" />
              </el-checkbox-group>
              <el-button slot="reference" class="filter" icon="el-icon-menu" size="small" circle />
            </el-popover>
          </el-tooltip>
        </div>
      </el-row>
    </div>
    <!-- 表格区域 -->
    <div class="table-box">
      <el-table id="outTable" ref="myTable" :data="imglist" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="#" width="50" />
        <el-table-column v-if="checkList.includes('广告图位')" prop="advposname" label="广告图位" />
        <el-table-column v-if="checkList.includes('广告图描述')" prop="advimgdesc" label="广告图描述" />
        <el-table-column v-if="checkList.includes('广告图')" label="广告图">
          <template #default="{row}">
            <el-image
              style="width: 100px; height: 100px"
              :src="'http://124.223.14.236:8060/'+row.advimgsrc
              "
              :fit="'cover'"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="checkList.includes('广告图链接')" prop="advimglink" label="广告图链接" />
        <el-table-column prop="" label="操作">
          <template #default="{row}">
            <div style="display: flex; justify-content: center; align-items: center;">
              <el-button size="mini" circle type="primary" icon="el-icon-edit" @click="addadvimg(row.id)" />
              <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="dodelete(row.id)" />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog ref="tagdialog" :title="dialog" :visible.sync="dialogVisible" width="45%" @close="handleClose">
        <el-form ref="advimgform" :model="advimgform" label-width="100px" class="demo-dynamic" size="medium">
          <el-form-item prop="advimgpos" label="广告位" :rules="{ required: true, message: '请选择广告位', trigger: 'change' }">
            <el-row>
              <el-col :span="15"><el-select v-model="advimgform.advimgpos" placeholder="请选择">
                <el-option v-for="item in advposlist" :key="item.id" :label="item.advposname" :value="item.id" />
              </el-select></el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="advimgdesc" label="广告图描述" :rules="{ required: true, message: '请输入广告图描述', trigger: 'blur' }">
            <el-row>
              <el-col :span="15"> <el-input v-model="advimgform.advimgdesc" /></el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="advimglink" label="广告图链接" :rules="{ required: true, message: '请输入广告图链接', trigger: 'blur' }">
            <el-row>
              <el-col :span="15"><el-input v-model="advimgform.advimglink" type="textarea" /></el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="advimgsrc" label="广告图" :rules="{ required: true, message: '请输入广告图', trigger: 'change' }">
            <el-row>
              <el-col :span="15"><el-upload
                class="upload-demo"
                action="http://124.223.14.236:8060/admin/common/upload?type=images"
                :limit="1"
                :headers="headers"
                :on-success="fileSuccess"
                :file-list="fileList"
                :on-remove="fileremove"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload></el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 分页区域 -->
    <div class="page">
      <el-pagination
        v-if="isTableAlive"
        background
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <Button v-print="printObj" type="info" class="btn-no">打印</Button>
  </div>

</template>
<script>

import { getadvimg, deladvimg, getadvpos, addadvimg, getadvimgdetail, editadvimg } from '@/api/adv'
import { exportTableAsXLSX } from '@/utils/unitools'
export default {
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      dialog: '添加广告图',
      multipleSelection: [],
      advposlist: [],
      checkList: ['广告图位', '广告图描述', '广告图', '广告图链接'],
      renderList: ['广告图位', '广告图描述', '广告图', '广告图链接'],
      imglist: [],
      currentid: '',
      advimgform: {
        advimgdesc: '',
        advimglink: '',
        advimgpos: '',
        advimgsrc: ''

      },
      printObj: {
        id: 'outTable',
        popTitle: '表格',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      },
      params: {
        advimgdesc: '',
        advimgpos: '',
        page: 1,
        limit: 10
      },
      flag: true,
      total: 0,
      up: 'el-icon-arrow-up',
      // 分页显隐
      isTableAlive: true
    }
  },
  computed: {
    headers() {
      return {
        'X-Token': this.$store.getters.token
      }
    }
  },
  async created() {
    this.getimglist()
    const res = await getadvpos()
    console.log(res)
    this.advposlist = res
  },
  methods: {
    submitForm() {
      this.$refs.advimgform.validate(
        async(valid) => {
          if (!valid) return
          if (this.dialog === '添加广告图') {
            const res = await addadvimg(this.advimgform)
            console.log(res)
            if (res === '') {
              this.$message.success('添加成功')
              this.dialogVisible = false
              this.getimglist()
            }
          } else {
            const res = await editadvimg({ ...this.advimgform, id: this.currentid })
            console.log(res)
            if (res === '') {
              this.$message.success('修改成功')
              this.handleClose()
              this.reload()
            }
          }
        }
      )
    },
    async addadvimg(id) {
      if (id === 'add') {
        this.dialog = '添加广告图'
        // console.log(1)
        this.dialogVisible = true
      } else {
        this.dialog = '编辑广告图'
        this.currentid = id
        const res = await getadvimgdetail(id)
        console.log(res)
        this.advimgform = res
        this.fileList = [{
          url: 'http://124.223.14.236:8060/' + res.advimgsrc
        }]
        this.dialogVisible = true
      }
    },
    fileSuccess(response, file, fileList) {
      console.log(response.data.savePath)
      this.fileList = fileList
      console.log(this.fileList)
      this.advimgform.advimgsrc = response.data.savePath
      this.$refs.advimgform.validate()
    },
    fileremove(file, fileList) {
      console.log(fileList, file)
      this.fileList = fileList
      this.$refs.advimgform.validate()
    },
    dodelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deladvimg(id)
        console.log(res)
        if (res === '') {
          if (this.imglist.length === 1 && this.params.page > 1) this.params.page--
          this.$message.success('删除成功')
          this.getimglist()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    exportExcel() {
      exportTableAsXLSX('outTable')
    },
    handleClose() {
      this.dialogVisible = false
      this.fileList = []
      this.$refs.advimgform.resetFields()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.params.page = 1
      this.params.limit = val
      this.getimglist()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getimglist()
    },
    async getimglist() {
      const res = await getadvimg(this.params)
      console.log(res)
      this.imglist = res.data
      this.total = res.count
    },

    hide() {
      this.flag = !this.flag
      this.up = this.flag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    },
    reload() {
      this.imglist = []
      this.params = {
        advimgdesc: '',
        advimgpos: '',
        page: 1,
        limit: 10
      }
      this.isTableAlive = false
      setTimeout(() => {
        this.isTableAlive = true
      }, 100)
      this.getimglist()
    },
    serach() {
      this.getimglist()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    delall() {
      console.log(this.multipleSelection)
      this.multipleSelection.forEach(async item => {
        const res = await deladvimg(item.id)
        console.log(res)
        if (res === '') {
          if (this.imglist.length === 1 && this.params.page > 1) this.params.page--
          this.$message.success('删除成功')
          this.getimglist()
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.page-box {
  padding: 20px;
  .search-box,
  .tabbar-box {
    padding: 10px 10px;
    height: 50px;
    .filter {
      margin-left: 10px;
    }
  }
  .fontsome {
    margin-left: 15px;
    &:hover {
      border-bottom: 1px solid #51a7ff;
      padding-bottom: 5px;
      color: #51a7ff;
    }
  }
}
.date {
  width: 250px;
}
.status {
  border: 1px solid #d9ecff;
  color: #409eff;
  background-color: #ecf5ff;
  text-align: center;
  border-radius: 5px;
  width: 60px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}
</style>
